<template>
	<view class="box_redius mar_top">
		<u-toast ref="uToast"></u-toast>
		<view class="flex flex_align">
			<view class="header_star mar_right">产品型号<text class="five_star iconfont icon-shiwujiaoxing"></text></view>
			<view class="model mar_left">
				<view class="mark iconfont icon-wenhao" @click.stop="hintShow = true"></view>
				<u-input :value="details.product_model" :fontSize="12" border="surround" disabled>
				</u-input>
			</view>
		</view>
		<view class="flex flex_align mar_top">
			<view class="header_star mar_right">产品SN码<text class="five_star iconfont icon-shiwujiaoxing"></text></view>
			<view class="model mar_left">
				<view class="mark iconfont icon-wenhao" @click.stop="hintShow = true"></view>
				<u-input :value="details.serial_number" :fontSize="12" border="surround" disabled>
				</u-input>
			</view>
		</view>
		<view class="flex flex_align mar_top">
			<view class="header_star mar_right">寄回清单<text class="five_star iconfont icon-shiwujiaoxing"></text>
			</view>
			<view class="model mar_left" style="padding-right: 0;">
				<u-checkbox-group v-model="inventory" shape="square" placement="row" stateClass="checkbox" disabled>
					<u-checkbox :customStyle="{width:'50%','margin-top': '10px'}" labelSize="12"
						v-for="(item, index1) in checkboxList" :key="index1" :label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="flex flex_align mar_top">
			<view class="header_star mar_right">故障类型<text class="five_star iconfont icon-shiwujiaoxing"></text></view>
			<view class="model mar_left" style="padding-right: 0;">
				<u-checkbox-group v-model="faultType" shape="square" placement="row" stateClass="checkbox" disabled>
					<u-checkbox :customStyle="{width:'50%','margin-top': '10px'}" labelSize="12"
						v-for="(item, index2) in faultList" :key="index2" :label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="flex flex_align mar_top">
			<view class="header_star mar_right">故障描述<text class="five_star iconfont icon-shiwujiaoxing"></text></view>
			<view class="model mar_left">
				<view class="mark iconfont icon-wenhao" @click.stop="hintShow = true"></view>
				<u-textarea :value="details.fault_desc" :fontSize="12" border="surround" disabled>
				</u-textarea>
			</view>
		</view>
		<view class="flex flex_align mar_top">
			<view class="header_star mar_right" style="width: 180rpx;">寄回快递单号<text
					class="five_star iconfont icon-shiwujiaoxing"></text></view>
			<view class="model mar_left">
				<u-input v-model="details.express_number" :fontSize="12" border="surround">
				</u-input>
			</view>
		</view>
		<view class="flex flex_align mar_top">
			<view class="header_star mar_right"></view>
			<view class="model mar_left" style="width: 480rpx;">
				<view class="fault_img flex flex_cen mar_bottom" v-show="details.fault_file_url">
					<image class="" :src="details.fault_file_url" mode="heightFix"></image>
				</view>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" width="220"
					height="150" uploadText="请上传快递单号" :maxCount="1">
				</u-upload>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		productList,
		faultList
	} from '@/api/product.js'
	import {
		uploadImg
	} from '@/utils/index.js'
	export default {
		props: {
			details: {
				type: Object,
				default: {}
			},
			fileList: {
				type: Array,
				default: []
			},
			checkboxList: { //查看详情多选只需要展示选中的
				type: Array,
				default: []
			},
			faultList: {
				type: Array,
				default: []
			},
			expressage: {
				type: String
			}
		},
		computed: {
			inventory() {
				if (this.details.product_name) {
					return this.details.product_name.split(',')
				}
			},
			faultType() {
				if (this.details.fault_name) {
					return this.details.fault_name.split(',')
				}
			}
		},
		watch: {

		},
		data() {
			return {

			}
		},
		created() {
			//this.getproductList()
			//this.getfaultList()
		},
		methods: {
			//图片上传 
			afterRead(event) {
				let that = this
				uploadImg(event).then(res => {
					let {
						data
					} = res
					this.$emit('replaceImg', data.fullurl)
					this.details.express_number_img = data.url
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//删除图片
			deletePic(event) {
				this.$emit('deletePic', event.index)
			},
			//故障类型
			getfaultList() {
				faultList().then(res => {
					this.faultList = res.data
				})
			},
			getproductList() {
				productList().then(res => {
					this.checkboxList = res.data
				})
			},
			//复制订单号
			copy(item) {
				let that = this
				if (!item) return that.$u.toast('暂无订单号信息');
				uni.setClipboardData({
					data: item,
					success(res) {
						that.$u.toast('复制成功')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.model {
		flex: 1;
		position: relative;
		padding-right: 50rpx;

		.mark {
			position: absolute;
			right: -5px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 48rpx;
			color: #999999;
		}

		.textarea {
			width: 70%;
			margin: 0 8px 8px 0;
		}

	}

	.fault_img {
		image {
			height: 300rpx;
		}
	}
</style>
